const path = require("path");
const TerserPlugin = require("terser-webpack-plugin"); // 用于在生成环境剔除debuger和console

function resolve(dir) {
  return path.join(__dirname, dir);
}

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";

// 本地环境是否需要使用cdn
const devNeedCdn = false;

// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    "element-ui": "ELEMENT",
    BMap: "BMap"
  },
  // cdn的css链接
  css: ["https://unpkg.com/animate.css@3.5.2/animate.css", "https://unpkg.com/element-ui@2.9.1/lib/theme-chalk/index.css"],
  // cdn的js链接
  js: [
    "https://unpkg.com/vue@2.6.10/dist/vue.js",
    "https://unpkg.com/vuex@3.1.1/dist/vuex.js",
    "https://unpkg.com/vue-router@3.0.6/dist/vue-router.js",
    "https://unpkg.com/axios@0.21.1/dist/axios.js",
    "https://unpkg.com/element-ui@2.9.1/lib/index.js"
  ]
};

module.exports = {
  // 项目部署的基础路径
  // 默认假设你的应用将会部署在域名的根部，
  // 比如 https://www.foobar.com/
  // 如果你的应用时部署在一个子路径下，那么你需要在这里指定子路径
  // 比如，如果你的应用部署在 https://www.foobar.com/my-app/
  // 那么将这个值改为 `/my-app/`
  publicPath: "/my-app/",
  // 将构建好的文件输出到哪里
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    port: 3101,
    https: false,
    host: "localhost",
    hotOnly: false,
    open: false, // 配置自动启动浏览器
    // disableHostCheck: true,
    // headers: {
    //   'Set-Cookie': 'Secure;SameSite=None'
    // },
    proxy: {
      "/api": {
        target: "http://test.ifredom.com",
        ws: true,
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          "^/api": ""
        }
      },
    }
  },
  pwa: {
    name: "ifredom PWA App",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // configure the workbox plugin
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "src/registerServiceWorker.js"
      // ...other Workbox options...
    }
  },
  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],
  // 生产环境 sourceMap
  productionSourceMap: false,
  // 构建时开启多进程处理 babel 编译
  parallel: require("os").cpus().length > 1,
  chainWebpack: (config) => {
    // ============注入cdn start============
    config.plugin("html").tap((args) => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn;
      return args;
    });
    // ============注入cdn start============

    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@theme", resolve("theme"))
      .set("@assets", resolve("src/assets"))
      .set("@com", resolve("src/components"));

    if (process.env.NODE_ENV === "production") {
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码，抽离公共样式
      config.optimization.splitChunks({
        chunks: "all"
      });
    }

    // 兼容老版本浏览器
    const entry = config.entry("app");
    entry.add("babel-polyfill").end();
    entry.add("classlist-polyfill").end();

    // 处理所有svg图片
    config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg,
    config.module
      .rule("svg-sprite-loader")
      .test(/\.svg$/)
      .include.add(resolve("src/icons")) // 处理svg目录
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });

    // 去除console来减少文件大小，效果同'UglifyJsPlugin'
    if (process.env.NODE_ENV === "production") {
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ["console.log"]
          }
        }
      });
    }
  },
  configureWebpack: (config) => {
    // 用cdn方式引入，则构建时要忽略相关资源
    if (isProduction || devNeedCdn) config.externals = cdn.externals;
  },
  css: {
    // loaderOptions: {
    //   postcss: {
    //     plugins: [
    //       require('postcss-pxtorem')({
    //         rootValue: 192, // 换算的基数
    //         selectorBlackList: [], // 忽略转换正则匹配项
    //         propList: ['*']
    //       })
    //     ]
    //   }
    // }
  }
};
